<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>组件页面</title>
    <link rel="shortcut icon" href="../images/logo_16x16.png">
    <link rel="stylesheet" href="../css/plugins/bootstrap.min.css">
    <link rel="stylesheet" href="../css/plugins/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="../css/theme.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_399091_1s750bz73w61or.css">
    <script src="../scripts/plugins/rem.js"></script>
    <!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <!--顶部导航栏菜单-->
    <nav class="navbar navbar-default">
        <div class="container">
            <!--  *************** 响应式头部 start ***************  -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="../images/logo.png" alt="logo"></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="./product.html" class="nav--active">产品</a></li>
                    <li><a href="./customization.html">SaaS定制平台</a></li>
                    <li><a href="./fabric.html">SaaS面料平台</a></li>
                    <li><a href="./case.html">客户案例</a></li>
                    <li><a href="./consulting.html">活动资讯</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
        <!--  *************** 响应式头部 end ***************  -->
    </nav>

    <!-- 
        qs-swiper
        轮播图图片插入方式：在你开发的当前页面中以样式背景图插入图片。
        .slide-one {
            background: url("../images/banner1.png") no-repeat;
        } 
    -->
    <div class="qs-swiper">
        <!-- swiper component -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide slide-one">
                    <!-- swiper title demo -->
                    <div class="container">
                        <div class="row">
                            <div class="qs-swiper__title col-xs-7 col-sm-7 col-md-8 col-lg-5">
                                <h2 class="qs-swiper__title__h">面料扫描系统的应用</h2>
                                <p class="qs-swiper__title__p">利郎通过使用我们的面料扫描仪系统和面料展示系统方案解决了传统采集方式面料信息无法完整和真实的难题</p>
                                <div class="qs-swiper__title__btnpanel">
                                    <a href="#" class="qs-swiper__title__btnpanel__btndetail">查看详情</a>
                                </div>
                            </div>
                        </div> 
                    </div>
                </div>
                <div class="swiper-slide slide-two">
                    <!-- swiper title demo -->
                    <div class="container">
                        <div class="row">
                            <div class="qs-swiper__title col-xs-7 col-sm-7 col-md-8 col-lg-5">
                                <h2 class="qs-swiper__title__h">面料扫描系统的应用</h2>
                                <p class="qs-swiper__title__p">利郎通过使用我们的面料扫描仪系统和面料展示系统方案解决了传统采集方式面料信息无法完整和真实的难题</p>
                                <div class="qs-swiper__title__btnpanel">
                                    <a href="#" class="qs-swiper__title__btnpanel__btndetail">立即注册</a>
                                    <a href="#" class="qs-swiper__title__btnpanel__btndetail">查看详情</a>
                                </div>
                            </div>
                        </div> 
                    </div>
                </div>
                <div class="swiper-slide slide-three">
                    <!-- swiper title demo -->
                    <div class="container">
                        <div class="row">
                            <div class="qs-swiper__title col-xs-7 col-sm-7 col-md-8 col-lg-5">
                                <h2 class="qs-swiper__title__h">面料扫描系统的应用</h2>
                                <p class="qs-swiper__title__p">利郎通过使用我们的面料扫描仪系统和面料展示系统方案解决了传统采集方式面料信息无法完整和真实的难题</p>
                                <div class="qs-swiper__title__btnpanel">
                                    <a href="#" class="qs-swiper__title__btnpanel__btndetail">查看详情</a>
                                </div>
                            </div>
                        </div> 
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <!-- tab页面切换，最外层没有用div包裹（使用于全屏） -->
    <div class="my-tab">
        <div class="container">
            <div class="row">
                <div class="col-lg-2"></div>
                <div class="col-lg-8">
                    <a href="#home" data-toggle="tab" class="active">tab1</a>
                    <a href="#customization" data-toggle="tab">tab2</a>
                </div>
                <div class="col-lg-2"></div>
            </div>
        </div>
    </div>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="home">
            tab1内容
        </div>
        <div class="tab-pane fade" id="customization">
            tab2内容
        </div>
    </div>
    <!-- END tab页面切换 -->


    <!-- 
        qs-card
        卡片修改方式：在你开发的当前页面中去控制修改容器，不去修改组件样式。
    -->
    <div class="container">
        <div class="row">
            <h2>Qs-Card</h2>
            <!--  *************** 组件 单个卡片组件 start ***************  -->
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                <div class="qs-card"><!-- w:380 h:380 -->
                    <a href="###">
                        <div class="qs-card__headerImg">
                            <img src="../images/04.png" alt="qsCard">
                        </div>
                        <div class="qs-card__contentTxt">
                            <div class="qs-card__contentTxt__panel">
                                <h3>利郎（中国）有限公司</h3>
                                <h2>中国男装领军品牌</h2>
                                <p class="qs-card__contentTxt__panel__txt">利郎通过使用我们的面料扫描仪系统和面料展示系统方案解决了传统采集方式面料信息无法完整和真实的难题。</p>
                                <!--
                                    border需要 就加样式 ： qs-card__contentTxt__panel__a--border
                                -->
                                <p class="qs-card__contentTxt__panel__a">提升面料选择效率，面料管理</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <!--  *************** 组件 单个卡片组件 end ***************  -->
        </div>

    </div>

    <!--
        qs-docCard
        文档中心：卡片组件
    -->
    <div class="container">
        <div class="row">
            <h2>qs-docCard</h2>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                <div class="qs-docCard">
                    <div class="qs-docCard__icon">
                        <img src="../images/doc01.png" alt="doc">
                    </div>
                    <h3 class="qs-docCard__h">企业内部开发</h3>
                    <p class="qs-docCard__p">企业IT人员，依托定制平台的开放能力，将公司的HR、OA、客户管理等系统接入</p>
                    <div class="qs-docCard__a">
                        <a href="###">快速接入</a>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <!-- 
        qs-footer
        footer插入方式：在你开发的当前页面中丢入尾巴。
    -->
    <div>
        <h2>Qs-Footer</h2>
        <!--  *************** 组件 footer start ***************  -->
        <div class="qs-footer">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-8 qs-footer__litxt">
                        <ul class="col-xs-4 col-sm-3 col-md-3 col-lg-3">
                            <li class="qs-footer__litxt__title">快速通道</li>
                            <li><a href="./product.html#home">面料平台</a></li>
                            <li><a href="./product.html#customization">定制平台</a></li>
                            <li><a href="./product.html#retail">服装智能零售</a></li>
                            <li><a href="./scanner.html">面料扫描仪</a></li>
                        </ul>
                        <ul class="col-xs-4 col-sm-3 col-md-3 col-lg-3">
                            <li class="qs-footer__litxt__title">关于我们</li>
                            <li><a href="./about.html">关于启尚</a></li>
                            <li><a href="./contact-us.html">联系方式</a></li>
                            <li><a href="./talent.html">人才计划</a></li>
                        </ul>
                        <ul class="col-xs-4 col-sm-3 col-md-3 col-lg-2">
                            <li class="qs-footer__litxt__title">规则条款</li>
                            <li><a>服务条款</a></li>
                            <li><a>隐私条款</a></li>
                        </ul>
                    </div>
                    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-4 qs-footer__phone">
                        <h3>0592-5577008</h3>
                        <h5>周一至周五 08:00 - 18:00</h5>
                        <div class="qs-footer__phone__btn">
                            <button class="btn">免费上门服务</button>
                        </div>
                        <div class="qs-footer__phone__icon">
                            <i class="iconfont icon-guanwang-tubiao-14"></i>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 qs-footer__company">
                        <p> Copyright © 2012-2017 Qishon Technology International Company Ltd. </p>
                        <h4>厦门启尚科技有限公司<span>|</span>闽ICP备15017467号-1</h4>
                    </div>
                </div>
            </div>
        </div>
        <!--  *************** 组件 footer end ***************  -->
    </div>


    <script src="../scripts/plugins/jquery-1.9.1.min.js"></script>
    <script src="../scripts/plugins/bootstrap.min.js"></script>
    <script src="../scripts/plugins/swiper-3.4.2.jquery.min.js"></script>
    <script>
        $(function () {
            var mySwiper = new Swiper('.swiper-container', {
                autoplay: 5000, //可选选项，自动滑动
                loop: true,
                pagination: '.swiper-pagination',
                paginationClickable: true
            })
        })
    </script>
</body>
</html>